.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gs-header {
  color: #162162;
  font-family: 'Aldrich', sans-serif;
  background-color: #ffe999;
  font-size: 3em;
  padding-bottom: 10px;
  text-align: center;
}

.gs-settings {
  background-color: #ffde66;
  border-bottom: 3px solid #ffc800;
  text-align: center;
}

.gs-settings .ant-switch-checked {
  background-color: #162162;
}

.gs-settings .ant-form-item-label,
.gs-settings .ant-form-item-children,
.gs-settings .ant-radio-group {
  color: #162162;
}

.gs-settings button.ant-btn,
.gs-settings button.ant-btn:empty {
  vertical-align: middle;
}

.logo {
  height: 60px;
}

.main-content {
  color: #162162;
  display: flex;
  flex: 1;
}

.main-content h2 {
  color: #162162;
}

.gui-wrapper {
  margin: 10px 5px 10px 10px;;
  background-color: #e8e8e8;
  flex: 3;
}

.gui-wrapper h2,
.editor-wrapper h2 {
  font-family: 'Aldrich', sans-serif;
  text-align: center;
  color: #162162;
}

.right-wrapper {
  margin: 10px 10px 10px 5px;
  background-color: #e8e8e8;
  flex: 2;
  max-width: calc(100% / 3);
}

.right-wrapper .ant-collapse {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: unset;
}

.right-wrapper .ant-collapse .ant-collapse-item-active {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-wrapper .ant-collapse .ant-collapse-content-active {
  flex: 1;
}

.right-wrapper .ant-collapse .ant-collapse-content-box {
  height: 100%;
}

.right-wrapper .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
  padding: unset;
}

.gs-symbolizer-preview {
  height: 100%;
}

.gs-symbolizer-preview .map {
  height: 100%;
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .gs-small-col {
    width: auto;
  }

  .main-content {
    display: block;
  }

  .right-wrapper {
    max-width: 95%;
  }

}
